<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html"  prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean"  prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://displaytag.sf.net" 			 prefix="display" %>
<%@page import="com.kcs.common.utils.commonUtils"%>
<%@page import="com.kcs.common.utils.PropsUtils"%>
<%@page import="com.kcs.common.utils.Constant"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Validate Settlement</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.pack.js"></script>   
<script type="text/javascript" src="jsp/script/jsDatePick.full.1.3.js"></script>   	
<script type="text/javascript" src="jsp/script/common.js"></script>  
<link rel="stylesheet" type="text/css" href="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/table.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/jsDatePick_ltr.css" />
<link rel="stylesheet" type="text/css" href="jsp/css/fxmarginStyle.css"/>
<script type="text/javascript">
	var g_data_size = 0;
	
	$(document).ready(function() {
		jQuery("#action").val("init");
	
		/*new JsDatePick({
			useMode:2,
			target:"valueDate",
			dateFormat:"%d/%m/%Y"
		});*/

		//jQuery("#valueDate").val(getCurrentDate());
		g_data_size = jQuery("[name=settleAmount]").length;

		for(var i = 1 ; i <= g_data_size; i++){
			jQuery("#settleAmount" + i).val(addCommas(jQuery("#settleAmount" + i).val()));
			jQuery("#settleRemain" + i).val(addCommas(jQuery("#settleRemain" + i).val()));
		}
	
	});

	function saveFunction(){
		var objData = new Array();
		var settleAmount;
		var settleRemain;
		var dealsSettleId;
		var rowVersion;
		var dealId;

		g_data_size = jQuery("[name=settleAmount]").length;
		
		for(var i = 1 ; i <= g_data_size; i++){
			settleAmount 	= jQuery("#settleAmount" + i).val();
			settleRemain 	= jQuery("#settleRemain" + i).val();
			dealsSettleId 	= jQuery("#dealsSettleId" + i).val();
			rowVersion 		= jQuery("#rowVersion" + i).val();
			dealId 			= jQuery("#dealId" + i).val();

			if(settleAmount == null || settleAmount == ""){
				 alert("Please input settleAmount");
				 return;
			}

			objData.push({
				  "settleAmount" 	: removeCommas(settleAmount), 
				  "settleRemain" 	: removeCommas(settleRemain), 
				  "dealsSettleId" 	: dealsSettleId, 
				  "rowVersion" 		: rowVersion,
				  "dealId"			: dealId
				  });
		}
		loading();
	
		jQuery.post("/FxMargin/ValidateSettlementServlet",{
			"objData" : JSON.stringify(objData),
			},
			function(data){
				if(data != null && data.data == "s"){
					unloading();
					alert(m_save_success);
					search();
				} else if(data.data == "to"){
					unloading();
					alert("Session time out!");
				} else{
					unloading();
					alert(m_save_fail);
				}
				$.fancybox.close();
				},"json").error(
			function(){
				unloading();
				alert("Ajax error");
			}
		);
		
	}
			
	function resetFunction(){
		/*jQuery("#cifNo").val("");
		jQuery("#customerName").val("");
		jQuery("#valueDate").val("");*/
		loading();
		jQuery("#action").val("init");
		submitform();
	}
	
	function search(){
		loading();
		jQuery("#action").val("search");
		submitform();
	}
	
	
	function changeSettleAmount(value, amount, index){
		value = removeCommas(value);

		if(value == "." || value == "") value = 0;
		
		if(value > amount){
			jQuery("#settleAmount" + index).val(addCommas(amount.toFixed(2)));
			jQuery("#settleRemain" + index).val(0.00);
		} else {
			var settleRemain = addCommas((amount - value).toFixed(2));
			var settleAmount = addCommas(parseFloat(value).toFixed(2));
			
			jQuery("#settleAmount" + index).val(settleAmount);
			jQuery("#settleRemain" + index).val(settleRemain);
		}
	}

	// for popup customer //
	function onPopup(id, src, width, height){
		g_datacustomer = null;
		jQuery("#" + id + "_iframe").html("");
		src = "http://" + window.location.host + "/FxMargin/" + src + ".do?pAction=init";
		var html = "<center><iframe src='" + src +"' height='" + height +"px' width='" + width + "px' id='myIframe'></iframe></center>";

		jQuery("#" + id + "_iframe").html(html);

		openPopup(id);
		
	}

	function select(data){
		g_datacustomer = data;
	}
	
	function onCustomer(){
		/*	global variable 'g_datacustomer' is use	*/
 		if(g_datacustomer != null ) {

 			jQuery("#cifNo").val(g_datacustomer.cifNo);
 			jQuery("#customerName").val(g_datacustomer.customerName);	
 			jQuery.fancybox.close();
 	 	}
	}
	
	function offCustomer(){
		jQuery.fancybox.close();
	}
	// for popup customer //
	

</script>
</head>
<body>

<%@ include	file="include/headerMenu.jsp"%>

<center>
<div style="width:95%" align="center">
	<html:form action="/ValidateSettlementActoin.do">
		<html:hidden property="action" styleId="action"/>
		
		<table width="100%" class="MarginHeader">
			<tr>
				<td align="left">Validate Settlement</td>
			</tr>
		</table>
		
		<div class="CriteriaBox">
			<table width="100%" class="MarginCriteria">
				<tr>
					<td width="50%" align="right">CIF No. :</td>
					<td width="50%" align="left" >
						<html:text property="cifNo" styleId="cifNo" styleClass="disabled" readonly="true" ></html:text>
						<img src="jsp/images/btn/glass_search.gif" style="width:30px;cursor:pointer;" onclick="onPopup('popupCustomer','PopupCustomerAction',700,540);" />
					</td>
				</tr>
				<tr>
					<td width="50%" align="right">Customer Name :</td>
					<td width="50%" align="left" ><html:text property="customerName" styleId="customerName" size="50" styleClass="disabled" readonly="true" ></html:text></td>
				</tr>	
				<tr>
					<td width="50%" align="right">Date :</td>
					<td width="50%" align="left" ><html:text property="date" styleId="valueDate" readonly="true" styleClass="disabled"></html:text></td>
				</tr>
			</table>
			
			
			<table width="100%" class="MarginCriteria">
				<tr>
					<td width="100%" align="center">
						<input type="button" class="button" value="Search" onclick="search();"/>
						&nbsp;&nbsp;
						<input type="button" class="button" value="Reset" onclick="resetFunction();"/>
					</td>
				</tr>
			</table>
		</div>
		
		<logic:present name="<%=Constant.SHOW_RESULT%>">
			<div class="MarginTable">
				<display:table id="data" name="sessionScope.ValidateSettlementActoinForm.validateSettlementBOList" requestURI="/ValidateSettlementActoin.do" pagesize="10" >
					
					<display:column property="cifNo"   			title="CIF No."   		sortable="false" class="center"/>
					<display:column property="customerName"   	title="Customer Name"   sortable="false" class="left"/>
					<display:column property="inputTime" 		title="Input Time" 		sortable="false" class="center"/>				
					<display:column property="dealId" 			title="Deal No.(RetAD)" sortable="false" class="center"/>		
					<display:column property="dealType"			title="Deal Type" 		sortable="false" class="left"/>		
					<display:column property="amount"			title="Amount" 			sortable="false" class="right" format="{0,number,#,##0.00}"/>							
					<display:column property="curr"				title="Cur." 			sortable="false" class="center"/>		
					<display:column	title="Settle Amount" 	sortable="false" class="center">
						<input type="text" name="settleAmount" id="settleAmount${data.index }" value="${data.settleAmount}" onchange="changeSettleAmount(this.value,${data.amount},${data.index })" onkeypress="return isFloat(event, this.value)" class="right"/>
					</display:column>		
					<display:column title="Settle Remain" 	sortable="false" class="center">
						<input type="text"   name="settleRemain"  id="settleRemain${data.index }"  value="${data.settleRemain}" disabled="disabled" class="right"/>
						<input type="hidden" name="dealsSettleId" id="dealsSettleId${data.index }" value="${data.dealsSettleId }" />
						<input type="hidden" name="dealId" 		  id="dealId${data.index }" 	   value="${data.dealId }" />
						<input type="hidden" name="rowVersion" 	  id="rowVersion${data.index }"    value="${data.rowVersion }" />
					</display:column>
					
				</display:table>
			</div>
		</logic:present>
		
		<logic:present name="<%=Constant.NOT_EMPTY%>">
			<table width="100%">
				<tr>
					<td width="100%" align="center"><input type="button" class="button" value="Save" onclick="saveFunction();"/></td>
				</tr>
			</table>
		</logic:present>
		
		<div style="display:none">
	        <div id="popupCustomer" style="width:710px;height: 600px">
	        	<div id="popupCustomer_iframe"></div>
				<table width="100%">
					<tr>
						<td width="33%" align="center">
							<input type="button" value="Ok" class="button" onclick="onCustomer();"/>
						</td>
						<td width="34%" align="center">
							<input type="button" value="Close" class="button" onclick="offCustomer();"/>
						</td>
					</tr>
				</table>
	        </div>
	    </div>
	     
		<%@ include	file="include/footer.jsp"%> 
		<%@ include	file="include/message.jsp"%> 
		
	</html:form>	
	
</div>
</center>

</body>
</html>